import { ConfigProvider, theme } from 'antd'
import { useSelector } from 'react-redux'
import type { ReactNode } from 'react'
import zhCN from 'antd/locale/zh_CN'
interface ThemeProviderProps {
  children: ReactNode
}

const ThemeProvider = ({ children }: ThemeProviderProps) => {
  const isDark = useSelector((state: unknown) => (state as { theme: { isDark: boolean } }).theme.isDark)

  return (
    <ConfigProvider
      locale={zhCN}
      theme={{
        algorithm: isDark ? theme.darkAlgorithm : theme.defaultAlgorithm,
        token: {
          // 布局相关
          colorBgLayout: isDark ? '#2a2a2a' : '#f5f5f5',
          colorBgContainer: isDark ? '#2a2a2a' : '#ffffff',
          colorBgElevated: isDark ? '#2a2a2a' : '#ffffff',
          
          // 文字颜色
          colorText: isDark ? '#ffffff' : '#000000',
          colorTextSecondary: isDark ? '#cccccc' : '#666666',
          
          // 边框颜色
          colorBorder: isDark ? '#434343' : '#f0f0f0',
          colorBorderSecondary: isDark ? '#303030' : '#f0f0f0',
        },
        components: {
          Layout: {
            headerBg: isDark ? '#001529' : '#ffffff',
            siderBg: isDark ? '#001529' : '#ffffff',
            bodyBg: isDark ? '#2a2a2a' : '#f5f5f5',
            footerBg: isDark ? '#001529' : '#ffffff',
          },
          Menu: {
            darkItemBg: '#001529',
            darkItemSelectedBg: '#1890ff',
            darkItemHoverBg: '#111b26',
          }
        }
      }}
    >
      {children}
    </ConfigProvider>
  )
}

export default ThemeProvider
